<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>管理员登录</title>
  <style></style>
</head>
<body>
  <div>
    <table>
      <tr>
        <td>用户名</td>
        <td>
         <input type="text" id="name">
        </td>
      </tr>
      <tr>
        <td>密码</td>
        <td>
         <input type="password" id="pwd">
        </td>
      </tr>
      <tr>
        <td colspan="2" style="text-align: center;">
         <button id="btn">登录</button>
        </td>
      </tr>
    </table> 
  </div>
 <script>
   //获取id值
   var names = document.getElementById('name')
   var pwd = document.getElementById('pwd')
    var btn = document.getElementById('btn')
   //触发事件
   console.log(pwd)
   
   btn.onclick = function(){
     //对用户名进行去空格
     var anameval = names.value.trim();
     //密码中可能存在空格键，所以不能去出
     //var upwd = pwd.value.trim();
     var apwdval = pwd.value;
     if(anameval && apwdval){
        //调用Ajax函数
        ajax(anameval,apwdval)
     }else{
      alert('用户名和密码不能为空');
     }
   }
   //创建一个自定义函数，用于封装ajax方法
   function ajax(n,m){
      //创建Ajax函数
    var xhr = new XMLHttpRequest();
    //监听并返回值
    xhr.onreadystatechange=function(){
      //判断readyState==4
      if(xhr.readyState==4){
        if(xhr.status>=200 && xhr.status<300){
          var result = xhr.responseText;
          console.log(result)
          if(result.code){
            alert(result.msg)
        }
          }
      }
    }
    xhr.open('post','/admin/Login',true)
    //post方式发送之前必须制定传参的数据格式
    //设置请求头，先指定请求参数的格式
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
    //发送请求
    xhr.send(`aname=${n}&apwd=${m}`)
    }

 </script>
</body>
</html>